<html>
  <head>
    <title>Vega Benchmark</title/>
    <link rel="stylesheet" href="css/vega.css"/>
    <script src="lib/d3.v3.min.js"></script>
    <script src="../vega.js"></script>
    <style>
* { font-family: Helvetica Neue, Helvetica, Arial, sans-serif; }
    </style>
  </head>
  <body>
    <div id="ctrl">
      <strong>Vega Benchmark</strong>  &nbsp; &nbsp;
      Points:     <select id="data"></select> &nbsp;
      Mark:       <select id="type"></select> &nbsp;
      Renderer:   <select id="rend"></select> &nbsp;
      Iterations: <select id="iter"></select> &nbsp;
      <input type="button" id="run" value="Run!"/>
    </div>
    <div id="vis"></div>
<script type="text/javascript">
function params() {
  return location.search.slice(1)
    .split("&")
    .map(function(x) { return x.split("="); })
    .reduce(function(a, b) {
      a[b[0]] = b[1]; return a;
    }, {});
}

var p = params(),
    N = (~~p.N) || 1000,
    type = p.type || "symbol",
    ticks = p.ticks || 20,
    w = (~~p.width) || 960,
    h = (~~p.height) || 500,
    renderer = p.renderer || "canvas";

d3.select("#data")
  .on("change", function() { N = ~~this.options[this.selectedIndex].value; })
  .selectAll("option")
    .data([1000, 5000, 10000, 50000, 100000])
  .enter().append("option")
    .attr("value", vg.identity)
    .text(String);

d3.select("#type")
  .on("change", function() { type = this.options[this.selectedIndex].value; })
  .selectAll("option")
    .data(["symbol", "rect", "arc", "path", "text"])
  .enter().append("option")
    .attr("value", vg.identity)
    .text(String);

d3.select("#rend")
  .on("change", function() { renderer = this.options[this.selectedIndex].value; })
  .selectAll("option")
    .data(["canvas", "svg"])
  .enter().append("option")
    .attr("value", vg.identity)
    .text(String);

d3.select("#iter")
  .on("change", function() { ticks = ~~this.options[this.selectedIndex].value; })
  .selectAll("option")
    .data([20, 100, 200, 500, 1000])
  .enter().append("option")
    .attr("value", vg.identity)
    .text(String);

d3.select("#run").on("click", function() { run(); });

function run() {
  vg.parse.spec(spec(), function(chart) {
    self.view = chart({el:"#vis", renderer:renderer}).update();
    var count = 0, t0 = Date.now();
    d3.timer(function() {
      var marks = view.model().scene().items[0].items[0].items;
      for (var i=0; i<marks.length; ++i) {
        marks[i].x += ~~(2 * (2*Math.random() - 1));
        marks[i].y += ~~(2 * (2*Math.random() - 1));
      }
      view.render();
      
      if (++count > ticks) {
        var fps = (1000 * ticks / (Date.now() - t0)).toFixed(1);
        console.log("Frames Per Second: " + fps);
        alert("Frames Per Second: " + fps);
        return true;
      }
    });
  });
}

function spec() {
  return {
    width: w,
    height: h,
    padding: {top:20, left:10, bottom:10, right:10},
    data: [{
      name: "points",
      values: d3.range(N).map(function(i) {
        return [Math.random(), Math.random()];
      })
    }],
    scales: [
      {name:"x", domain:[0,1], range:[0,w]},
      {name:"y", domain:[0,1], range:[0,h]}
    ],
    marks: [{
      type: type,
      from: {data: "points"},
      properties: {
        enter: {
          x: {scale:"x", field:"data.0"},
          y: {scale:"y", field:"data.1"},
          size: {value: Math.PI*25},
          width: {value: 10},
          height: {value: 10},
          text: {value: "A"},
          fill: {value:"steelblue"},
          startAngle: {value: Math.PI/6},
          endAngle: {value: 5*Math.PI/6},
          innerRadius: {value: 5},
          outerRadius: {value: 10},
          path: {value: "M-5,5L-5,-5L0,-1L5,-5L5,5L0,1Z"},
          fillOpacity: {value: Math.min(0.5, 50/Math.sqrt(N))}
        }
      }
    }]
  };
}

</script>
  </body>
</html>